import { Tag, Divider,Tooltip,message } from 'antd';
import {useEffect,useState} from 'react'
import {
  WechatOutlined,
  QqOutlined,
  GithubOutlined,
  GitlabOutlined,
} from '@ant-design/icons';
import './index.less'
export default function User(props){
  // console.log('userProps',props.user.user[0])
  const [userData,setUser] = useState({})
  useEffect(()=>{
    setUser(props.user&&props.user.user&&props.user.user[0]||{})
    console.log('userDatas',userData)
  })
  // const userData = props.user&&props.user.user&&props.user.user[0]
  // console.log('userData',userData)
  const copyData = (type)=>{
    const Input = document.createElement('input')
    document.body.appendChild(Input)
    switch(type){
      case 1:
        Input.value = 'ysh15120'
        break
      case 2:
        Input.value = '1002661758'
        break
      default:
        break
    }
    Input.select()
    document.execCommand('copy')
    message.success('复制成功')
    document.body.removeChild(Input)
  }

  const toLink = (type)=>{
    switch (type){
      case 1:
        /*
          window.open(链接，特殊窗口名)
          window.open()方法就是正常的模拟a标签的使用
            参数1是链接，就是正常的网页链接
            参数2是窗口名， 就是一个个窗口的名字，如果传递的是一个不存在的窗口名，就会弹出一个新的窗口并把窗口名设置成传递的窗口名
              这样当再执行这个方法的时候在有这个窗口名的情况下就会直接的是把指定窗口名的链接给替换成新的  非常好用

            另外第二个参数也可以是特殊的名字 如： _self _blank _parent _top
        */ 
        window.open('https://github.com/Jimmylxue','_jimmy')
        break
      case 2:
        window.open('https://gitee.com/jimmyxuexue','_jimmy')
        break
      default:
        break
    }
  }

  return (
    <div className="User-container cardBox flex-between column">
      <div className="header-container">
        <img src="http://1.116.204.114/small.png" width="100%" height="100%" alt="头像" />
      </div>
      <div className="userName">Jimmy</div>
      <p className="desc-text baseColor">{userData.viewText}</p>
      <div className="icons flex-center wrap">
        <Tag className="spanItem" color="magenta">学习ing</Tag>
        <Tag className="spanItem" color="red">前端大法好</Tag>
        <Tag className="spanItem" color="volcano">react天下无敌</Tag>
        <Tag className="spanItem" color="orange">找工作</Tag>
        <Tag className="spanItem" color="gold">被访问{userData.view}次</Tag>
        {/* <span>学习ing~</span><span>前端大法好</span><span>react天下无敌</span><span>找工作</span><span>被访问100次</span> */}
      </div>
      <Divider plain style={{alignItems:'flex-start'}}>联系方式</Divider>
      <div className="user-icons">
        <Tooltip title="wechat:ysh15120">
          <WechatOutlined onClick={()=>{copyData(1)}} style={{fontSize:"25px"}}/>
        </Tooltip>
        <Tooltip title="qq:1002661758">
          <QqOutlined onClick={()=>{copyData(2)}} style={{fontSize:"25px"}}/>
        </Tooltip>
        <Tooltip title="github:https://github.com/Jimmylxue">
          <GithubOutlined onClick={()=>{toLink(1)}} style={{fontSize:"25px"}}/>
        </Tooltip>
        <Tooltip title="gitee:https://gitee.com/jimmyxuexue">
          <GitlabOutlined onClick={()=>{toLink(2)}} style={{fontSize:"25px"}}/>
        </Tooltip>
      </div>
      {/* <Alert message="Success Tips" type="success" showIcon /> */}
    </div>
  )
}